<!DOCTYPE html>
<html lang="zh">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
          body {
               perspective: 500px;
          }
          .box {
               transform-style: preserve-3d;
               position: relative;
               height: 0px;
               width: 0px;
               margin: 200px auto;
            animation: rotate1 25s linear infinite;
          }
          @keyframes rotate1 {
               0% {
                    transform: rotate3d(1,1,0,0deg);
               }

               100% {
                    transform: rotate3d(3,7,0,360deg);
                    width: 300px;
                    height: 300px;
               }
          }
      
          .fromt,
          .bottom,
          .top,
          .back,
          .left,
          .right {
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
          }
          /* 前 */
          .fromt {
               background-color: red;
               transform: translateZ(150px);
          }
          /* 下 */
          .bottom {
               background-color: saddlebrown;
               transform: translateY(150px) rotateX(-90deg);
          }
          /* 上 */
          .top {
               background-color: yellow;
               transform: translateY(-150px) rotateX(90deg);
          }
          /* 后 */
          .back {
               background-color: blueviolet;
               transform: translateZ(-150px)rotateX(180deg);
          }
          /* 左 */
          .left {
               background-color: darkturquoise;
               transform: translateX(-150px) rotateY(-90deg);
          }
          /* 右 */
          .right {
               background-color: lime;
               transform: translateX(150px) rotateY(90deg);
          }
     </style>
</head>
<body>
     <div class="box">
          <div class="fromt"></div>
          <div class="bottom"></div>
          <div class="top"></div>
          <div class="back"></div>
          <div class="left"></div>
          <div class="right"></div>
     </div> 
</body>
</html>